<template>
  <a-spin :spinning="loading">
    <div>
      <a-row>
        <a-col :xl="6" :lg="6" >
          <a-form-item label="学院" class="toop-select">
            <a-select
              showSearch
              style="width: 100%"
              :allowClear="true"
              placeholder="请选择学院"
              v-model="queryParam.institute"
              @change="changeInstitute"
              :options="collegeList"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="7" :lg="6" >
          <a-form-item label="导员名称">
            <a-select
              showSearch
              style="width: 100%"
              :allowClear="true"
              placeholder="请选择导员名称"
              @change="changeAssistant"
              v-model="queryParam.assistantId"
              :options="assistantList"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="10" :lg="11">
          <div style="height: 40px;line-height: 40px;text-align: right">
            <a-button style="margin-right: 8px" @click="()=>{this.exportData('/record/exportSign', '潍坊学院通勤记录表')}">
              通勤记录导出
            </a-button>
            <a-button style="margin-right: 8px" @click="()=>{this.exportData('/record/exportTrace', '潍坊学院学生异常追踪表')}">
              学生异常追踪表
            </a-button>
            <a-button style="margin-right: 8px" @click="runExceptionCheck">运行异常分析</a-button>
          </div>
        </a-col>
      </a-row>
      <a-card style="width: 90%;margin:0 auto;margin-bottom: 20px" v-for="item in reportsList">
        <div slot="title" class="card-title">
          <span class="title">人员实时分布 </span>
          <div>
            <div class="line on"></div>
            <div class="line to"></div>
            <span class="ti-time">{{ item.timeScope }}</span>
          </div>
          <div class="date">
            <div class="line on date-item"></div>
            <div class="line to date-item"></div>
            <span class="ti-time date-item">{{ date }}</span>
          </div>
        </div>
        <a-row justify="space-between" class="listing" type="flex">
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">总人数</span>
              <div>
                <a-popover title="总人数">
                  <template #content>
                    <p>弘德的学生总人数</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">校区实时人数</span>
              <div>
                <a-popover title="校区实时人数">
                  <template #content>
                    <p>学生最新一次打卡地是潍坊学院的人数汇总</p>
                    <p>注：小于等于当前时间段的结束时间</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="5">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">弘德实时人数</span>
              <div>
                <a-popover title="弘德书院实时人数">
                  <template #content>
                    <p>学生最新一次打卡地是弘德书院的人数汇总</p>
                    <p>右下角的数量代表未签到的学生数</p>
                    <p>注：小于等于当前时间段的结束时间</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">异常人数</span>
              <div>
                <a-popover title="异常人数">
                  <template #content>
                    <p>根据异常处理逻辑得到</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">签到记录</span>
              <div>
                <a-popover title="有效记录">
                  <template #content>
                    <p>所有学生打卡记录的汇总，可能存在重复学生</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row justify="space-between" class="num-name" type="flex">
          <a-col :span="4" class="text">
            {{ item.studentNum }}
          </a-col>
          <a-col :span="4">
            <a @click="toWfuNumm(item.wfuNum,item.timeScope)" class="text">{{ item.wfuNum }}</a>
          </a-col>
          <a-col :span="5">
            <div style="display: flex;justify-content: center;">
              <a @click="toHdNum(item.hdNum,item.timeScope)" class="text">{{ item.hdNum }}</a>
              <a @click="toNoSign(Number(item.studentNum - item.wfuNum - item.hdNum), item.timeScope)"><span
                class="add-text"> + {{ Number(item.studentNum - item.wfuNum - item.hdNum) }}</span></a>
            </div>
          </a-col>
          <a-col :span="4">
            <a @click="toErrorNum(item.errorNum, item.timeScope)" class="text err">{{ item.errorNum }}</a>
          </a-col>
          <a-col :span="4">
            <a @click="toSignInTotal(item.signNum,item.timeScope)" class="text record">{{ item.signNum }}</a>
          </a-col>
        </a-row>

      </a-card>
    </div>
  </a-spin>
</template>

<script>
  import { reports } from '@api/wfuReport/wfuReport'
  import { assistantList, collegeList } from '@api/base/wfuBase'
  import {TableMixin} from "@/mixins/TableMixin";
  import {runExceptionCheck} from "@api/wfuAlarm/wfuAlarm";

  const moment = require('moment')

  export default {
    name: 'Analysis',
    mixins: [TableMixin],
    data () {
      return {
        loading: false,
        date: '',
        queryParam: {},
        reportsList: [],
        assistantList: [],
        collegeList: []
      }
    },
    mounted () {
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      collegeList().then(res => {
        this.collegeList = res.data
      })
      this.init()
      this.date = moment().format('MMM Do')
      console.log('date', this.date)
    },
    methods: {
      runExceptionCheck() {
        runExceptionCheck().then(res => {
          if (res.code === 0) {
            this.$message.info("运行成功")
          } else {
            this.$message.warning("运行失败")
          }
        })
      },
      init () {
        this.loading = true
        reports(this.queryParam).then(res => {
          this.reportsList = res.data
          this.loading = false
        })
      },
      // 跳到签到记录
      toSignInTotal (num, time) {
        if (num < 1) {
          this.$message.warning('人数为0')
          return
        }
        var arr = time.split('~')
        this.$router.push({
          path: '/signInTotal/signInTotalView',
          query: {
            type: arr[1],
            assistantId: this.queryParam.assistantId,
            institute: this.queryParam.institute
          }
        })
      },
      toHdNum (num, time) {
        console.log("弘德");
        if (num < 1) {
          this.$message.warning('人数为0')
          return
        }
        var arr = time.split('~')
        this.$router.push({
          path: '/signInByTime/signInByTime',
          query: {
            type: arr[1],
            deviceGroup: '01',
            assistantId: this.queryParam.assistantId,
            institute: this.queryParam.institute
          }
        })
      },
      toWfuNumm (num, time) {
        if (num < 1) {
          this.$message.warning('人数为0')
          return
        }
        var arr = time.split('~')
        this.$router.push({
          path: '/signInByTime/signInByTime',
          query: {
            type: arr[1],
            deviceGroup: '02',
            assistantId: this.queryParam.assistantId,
            institute: this.queryParam.institute
          }
        })
      },
      toErrorNum (num, time) {
        if (num < 1) {
          this.$message.warning('人数为0')
          return
        }
        var arr = time.split('~')
        this.$router.push({
          path: '/processAlarm/processAlarm',
          query: {
            type: time,
            assistantId: this.queryParam.assistantId,
            institute: this.queryParam.institute
          }
        })
      },
      toNoSign (num, time) {
        if (num < 1) {
          this.$message.warning('人数为0')
          return
        }
        var arr = time.split('~')
        this.$router.push({
          path: '/noSignIn/notSignInReport',
          query: {
            type: arr[1],
            assistantId: this.queryParam.assistantId,
            institute: this.queryParam.institute
          }
        })
      },
      // 选择学院
      changeInstitute (e) {
        this.queryParam.institute = e
        this.queryParam.assistantId = undefined
        assistantList(this.queryParam.institute).then(res => {
          this.assistantList = res.data
        })
        this.init()
      },
      // 选择导员
      changeAssistant (e) {
        this.queryParam.assistantId = e
        this.init()
      }
    }
  }
</script>

<style scoped>
  .card-title {
    position: relative;
    text-align: left;
    display: flex;
    justify-content: space-between;
    height: 30px;
  }

  .title {
    font-size: 14px;
    height: 30px;
    line-height: 38px;
    color: #666a6d;
  }

  .date {
    position: absolute;
    top: 0px;
    right: 120px;
  }

  .date-item {
    background: #1890ff !important;
  }

  .line {
    width: 5px;
    height: 5px;
    background: #f28919;
  }

  .on {
    position: absolute;
    top: -10px;
    right: 5px;
  }

  .to {
    position: absolute;
    top: -10px;
    right: 90px;
  }

  .ti-time {
    position: absolute;
    top: -5px;
    right: 0px;
    font-size: 16px;
    width: 100px;
    border-radius: 0px 0px 5px 5px;
    padding: 2px;
    color: #fff;
    text-align: center;
    background: #f28919;
  }

  .add-text {
    color: #f28919;
    font-size: 20px;
    display: block;
    margin-left: 10px;
    line-height: 50px;
  }

  .listing {
    margin: 0 5%;
    font-family: "Microsoft Yahei";
    font-size: 18px;
  }

  .num-name {
    margin: 0 5%;
    font-size: 30px;
    font-family: "Microsoft Yahei";
    font-weight: bold;
  }

  .text {
    display: block;
    text-align: center;
    padding: 0 10px;
  }

  .err {
    color: #ed1b22;
  }

  .record {
    color: #00a74f
  }

  .toop-select {
    margin-left: 11%;
  }

  >>> .ant-card-head-title {
    padding: 10px 0 !important;
  }

  >>> .ant-form-item {
    display: flex;
  }

  >>> .ant-form-item-control {
    width: 220px;
  }
</style>
